<template>
  <div>
    <h1>人员列表</h1>
    <input type="text" v-model.lazy="name" @keyup.enter="add(list)" placeholder="请输入名字">
    <button @click="add(list)">添加</button>
    <button @click="addPersonSave">添加一个人，名字随机</button><p>{{message}}</p>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
    <h3 style="color: red">Count当前求和的数值是：{{sum}}</h3>

  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from "vuex"
import {nanoid} from 'nanoid'
export default {
  name: "Person",
  data(){
    return{
      name:''
    }
  },
  computed: {
    //开启命名空间后，组件中读取getters数据: 方式一自己直接读取 this.$store.state.personAbout.list
    //方式二：借助mapState读取
    ...mapState('personAbout',['personList','message']),
    ...mapState('countAbout',['sum']),
    list(){
        const person = {id:nanoid(),name:this.name}
        return person
    }
  },
  methods: {
    ...mapMutations('personAbout',['add']),
    ...mapActions('personAbout',['addPersonSave'])
  }
}
</script>

<style scoped>

</style>